<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>新建网页</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="description" content="" />
        <meta name="keywords" content="" />
        <style type="text/css">
			div {width:300px; height:200px; background-color:lightblue;}
        </style>
    </head>
    <body>
        <h2>jquery事件绑定</h2>

        <div></div>

		<script src="../../js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//① bind()事件绑定使用
			//同一个对象绑定多个click事件
			/*$(function() {
				
			});*/
			
			$(function() {
                /*$('div').bind('click', function () {

                });
                $('div').on('mouseover', function () {

                });
                $('div').click(function () {

                });*/


				$('div').bind('click', function() {
					console.log('谁碰了问我1');
				});
				$('div').bind('click', function() {
					console.log('谁碰了问我2');
				});
                // each  bind
				$('div').click(function() {
					console.log('谁碰了问我3');
				})
				$('div').on('mouseover', function() {
					console.log('mouseover');
					//this  JS DOM对象 
					//$(this) JQuery对象
					$(this).css('background-color', 'blue');
				});
				$('div').on('mouseout', function() {
					console.log('mouseout');
					//this
					$(this).css('background-color', 'lightblue');
				});
			})
			
		</script>
		
    </body>
</html>